<template>
  <div>
    <tabbar></tabbar>
    <!-- <router-view></router-view> -->
    <!-- 头部轮播 -->
    <swiper1 style=" margin-top: 33px"
      :itlingdata="{
    loop: true,
    autoplay:true,
      autoplay: {
    delay: 1500,
    stopOnLastSlide: false,
    disableOnInteraction: true,
    },
        pagination: {
      el: '.swiper-pagination',
    },
    }"
      itlingclass="top1"
    >
      <div class="swiper-slide" v-for="(data,index) in datalist.banners" :key="index">
        <img class="swiperimg" :src="data.imageUrl" alt />
      </div>
    </swiper1>
    <!-- 三大块 -->
    <div class="content">
      <div class="conten1"  @click='handelclick2()'>
        <div class="grid-msg">
          <p class="title">潮流美妆护肤</p>
          <p class="text">保你不吃亏</p>
        </div>
        <img
          class="img1"
          src="//img1.lukou.com/static/coupon/p/image_link/DpJhKKBvRA5iC7fpN9Wzn6rQXS23G5Cc.gif"
          alt
        />
      </div>
      <div class="nme">
        <div class="conten2"   @click='handelclick3()'>
        <div class="grid-msg1">
          <p class="title1" >超值大额卷</p>
          <p class="text1">优惠直击底价</p>
        </div>
        <img class="img2" src="//img1.lukou.com/static/p/commodity/img/20181212-235507.png" alt />
      </div>
      <div class="conten3"  @click='handelclick1()'>
        <div class="grid-msg2" >
          <p class="title2">早春女装上新</p>
          <p class="text2">速来抢购</p>
        </div>
        <img
          class="img3"
          src="//img1.lukou.com/static/coupon/p/image_link/CqgzpbJoxuan7OYGsD1C9imN2hxTCHaz.png"
          alt
        />
      </div>
      </div>
    </div>

    <!-- 头部list -->
    <div class="toplist">
      <a class="aaa" href>
        <img
          class="img4"
          src=""
          alt
        />
      </a>
      <swiper1
        :itlingdata="{
          freeMode : true,
          slidesPerView: 3,
          spaceBetween: 15,
          freeModeMomentum : false,
      }"
        itlingclass="top2"
      >
        <div class="swiper-slide" v-for="data in datalist.topList" :key="data.id" @click='handelclick(data)'>
          <div href="slidea">
            <img class="topimg" :src="data.image" alt />
            <div class="slidespan">
              <div id="slidespan1">{{data.title}}</div>
              <div id="slidespan2">
                <span>￥{{data.price}}</span>
              </div>
            </div>
          </div>
        </div>
        <div href class="swiper-slide topa"   @click='handelclick4()'>
          <p class="p1">更多商品</p>
          <p class="p2">see-more</p>
        </div>
      </swiper1>
    </div>

    <!-- 分割 -->
    <div class="split-line">
      <span class="line"></span>
      <span class="square"></span>
      <span class="text">小编精选，全场特惠 (ง •̀_•́)ง</span>
      <span class="square"></span>
      <span class="line"></span>
    </div>

    <!-- 商品列表 -->
    <ul >
      <!-- 商品组件 -->
      <list :datalist="datalist1" v-for="data in datalist1" :key="data.id" @click.native="handelclick(data)" :data='data' ></list>
    </ul>
    <!-- 返回顶部 -->
    <vueToTop></vueToTop>
  </div>
</template>
<script>
import vueToTop from 'vue-totop'
import Vue from 'vue'
import tabbar from '@/components/tabbar'
import swiper1 from '@/components/Swiper1'
import axios from 'axios'
import list from '@/components/list'
Vue.use(vueToTop)
export default {
  data () {
    return {
      datalist: [],
      datalist1: [],
      loaddata: null,
      loadstatus: true

    }
  },
  components: {
    tabbar,
    swiper1,
    list
  },
  methods: {
    handelclick (data) {
      // console.log(data)
      if(data.type===1){
        this.$router.push(`/c/${data.id}`)
      }else{
          var arr=data.url
          var id=arr.split('=')[1].replace("&task",'')
          this.$router.push(`/column/${id}`)
          console.log(id);
      }
    },
    handelclick1 () {
      this.$router.push('/list1')
    },
    handelclick2 () {
      this.$router.push('/list2')
    },
    handelclick3 () {
      this.$router.push('/list3')
    },
    handelclick4 () {
      this.$router.push('/list4')
    },
    onload () {
      var height =
        document.documentElement.scrollTop +
        document.documentElement.clientHeight -
        document.documentElement.scrollHeight
      if (height >= -50 && this.loadstatus) {
        this.loadstatus = false
        this.loaddata += 20
        axios({
          url: `http://www.xiongmaoyouxuan.com/api/tab/1?start=${this.loaddata}`
        }).then(res => {
          this.datalist1 = this.datalist1.concat(res.data.data.items.list)
          this.$nextTick(() => {
            this.loadstatus = true
          })
        })
      }
    }
  },
  mounted () {
    axios({
      url: 'http://www.xiongmaoyouxuan.com/api/tab/1?start=0'
    }).then(res => {
      this.datalist = res.data.data
      console.log(res.data.data.items.list.id)
      this.datalist1 = res.data.data.items.list
    })
    window.addEventListener('scroll', this.onload)
  },
  destroyed () {
    window.removeEventListener('scroll', this.onload)
  }
}
</script>
<style lang="scss" scoped>
html body {
  background-color: pink;
}
.swiperimg {
  width: 100%;
  // height: 141px;
}
.content {
  box-sizing: border-box;
  margin: -0.27rem 0 0.27rem;
  // padding: .27rem;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 1px 0 0 #d9d9d9;
  margin: 5px 7px 5px 10px;
  display: flex;
  // justify-items:center;
  justify-content: space-between;
  // height: 150px;
  .conten1 {
    width: 50%;
    height: 133px;
    background: #fdf4e6;
    // float: left;
    border-radius: 5px;
    // font-size: 0.427rem;
    // color: #877a73;
    box-sizing: border-box;
    position: relative;
    border-radius: 10px;
    padding: 10px;
    .grid-msg {
      z-index: 2;
      position: absolute;
      // left: 5px;

      // margin-right: 1.867rem;
      height: 2rem;
      // font-size: .427rem;

      // color: #877a73;
      .title {
        color: #43240c;
        font-size: 18px;
      }
      .text {
        font-weight: 500;
        color: #ff9e55;
        font-size: 12px;
        position: absolute;
        left: 0;
      }
    }
    .img1 {
      display: block;
      position: absolute;
      right: 0;
      bottom: 0;
      width: 133px;
      height: 133px;
      border: none;
    }
  }
  .conten2 {
  //  width: 50%;
    height: 61px;
    margin: 0px 0px 5px 7px;
    background-color: #fff3f1;
  //  float: left;
    border-radius: 0.21rem;
    border-radius: 10px;

    position: relative;
    .grid-msg1 {
      float: left;
      margin-top: 10px;
      .title1 {
        font-size: 16px;
        color: #43240c;
      }
      .text1 {
        color: #ff9e55;
        font-size: 12px;
      }
    }
    .img2 {
      width: 61px;
      height: 61px;
      z-index: 1;
      position: absolute;
      border: none;
      right: 0.27rem;
      top: 0;
    }
  }
  .conten3 {
    width: 100%;
    height: 61px;
    
    margin: 0px 0px 5px 7px;
    background-color: #eef9fc;
  float: left;
    border-radius: 10px;
    .grid-msg2 {
      float: left;
      margin-top: 10px;
      .title2 {
        font-size: 16px;
        color: #43240c;
      }
      .text2 {
        color: #ff9e55;
        font-size: 12px;
      }
    }
    .img3 {
      width: 61px;
      height: 61px;
      z-index: 1;
      border: none;
    }
  }
}
.toplist {
  background-color: #fff;
  margin: 10px 0 0;
  .aaa {
    float: left;
    margin-right: 13.12px;
    width: 42px;
    height: 129px;
    font-size: 0.29rem;
    text-align: center;
    color: #43240c;
    background-color: #fee44e;
    .img4 {
      margin: 33px 0 0;
      width: 27px;
      height: 61px;
    }
  }
  .topimg {
    width: 88px;
    height: 88px;
    border: 1px solid #d9d9d9;
    box-sizing: border-box;
  }
  .topa {
    width: 105px;
    height: 105px;
    font-size: 0.4rem;
    color: #fda900;
    border: 1px solid #d9d9d9;
    text-align: center;
    box-sizing: border-box;
    display: inline-block;
    .p1 {
      display: inline-block;
      padding-top: 30px;
      width: 100%;
      font-size: 16px;
      border-bottom: 1px solid #d9d9d9;
      padding-bottom: 0.1rem;
      box-sizing: border-box;
    }
    .p2 {
      width: 100%;
      color: #877a73;
      font-size: 12px;
    }
  }
}
.slidea {
  position: relative;
  display: inline-block;
  width: 2.35rem;
  overflow: hidden;
  background-color: #fff;
}
#slidespan1 {
  font-size: 12px;
  width: 100%;
  // height: .45rem;
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
  // line-height: .45rem;
  color: #43240c;
  white-space: nowrap;
}
#slidespan2 {
  color: #fa585a;
}
.split-line {
  background: #e0e0e0;
  text-align: center;
  font-size: 12px;
  color: hsla(21, 8%, 49%, 0.7);
  padding: 17px;
  .line {
    height: 1px;
    background-color: #fdde4a;
    width: 12%;
    display: inline-block;
    margin-bottom: 3px;
  }
  .square {
    content: "";
    width: 0;
    height: 0;
    border: 3px solid #fdde4a;
    transform: rotate(45deg);
    display: inline-block;
    box-sizing: border-box;
    margin-top: -3px;
  }
  .text {
    padding: 10px;
  }
}
.nme{
  // float: left;
  width: 50%;
}

</style>
